<template>
  <div class="container" v-if="$store.state.showLoginWrapper">
    <div class="login-wrapper"><img src="../assets/svg/userlogin.svg" alt="" class="user-login-svg"><span class="title">登录</span><span
        class="welcome">欢迎回来</span>
      <div class="uniqueness-wrapper">
        <div class="label"><span class="uniqueness-label">手机号/邮箱</span></div>
        <input type="text" class="uniqueness-input" v-model="user.uniqueness"></div>
      <div class="password-wrapper">
        <div class="label"><span class="password">密码</span><span
            class="find-password" @click="findPassword">找回密码</span></div>
        <input type="password" class="password-input" v-model="user.password" @keyup.enter="doLogin"></div>
      <span class="login-button" @click="doLogin">登录</span></div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      user:{
        uniqueness:'',
        password:''
      }
    }
  },
  methods:{
    doLogin(){
      this.$http.post('api/user/login',this.user).then(res=>{
        if (res.data.code===200){
          this.$store.commit('doLogin')
        }
      })
    },
    findPassword(){
      this.$router.push('/Activate?type=queryReset')
      this.$store.commit("showLoginWrapper", !1)
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .63);
  z-index: 10000;
  position: fixed
}

.login-wrapper {
  width: 500px;
  height: 500px;
  background-color: rgba(255, 192, 203, .63);
  background-color: #eee;
  z-index: 10000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px
}

.user-login-svg {
  position: relative;
  left: 50%;
  transform: translateX(-50%)
}

.title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  display: block;
  margin: 20px 0 10px
}

.welcome {
  text-align: center;
  display: block;
  font-size: 18px;
  margin-bottom: 10px
}

.password-wrapper .password-input, .uniqueness-wrapper .uniqueness-input {
  outline: none;
  border: 1px solid #9ea9aa;
  width: 100%;
  transition: all .3s ease 0s;
  outline: 0;
  color: #000;
  background-color: #fff;
  font-size: 1rem;
  padding: .375rem .75rem;
  margin: 10px 0
}

.find-password {
  float: right;
  cursor: pointer
}

.find-password:hover {
  color: #999
}

.login-button {
  display: inline-block;
  background-color: #000;
  width: 80%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px
}

.login-button:hover {
  opacity: .8
}
</style>